<template>
	<view :style="viewColor">
		<!-- <view class="nav-type" v-if="tabIndex == 1">
			<view class="nav-type-item" :class="nav_type == 1 ? 'nav-type-item-active' : ''" @click="clickNavType(1)">我的发布</view>
			<view class="nav-type-item" :class="nav_type == 2 ? 'nav-type-item-active' : ''" @click="clickNavType(2)">我的推广</view>
		</view> -->
		<view class="nav-type2" v-if="tabIndex == 1">
			<view class="nav-type2-item" :class="nav_type == 1 ? 'nav-type2-item-active' : ''" @click="clickNavType(1)">我的发布</view>
			<view class="nav-type2-item" :class="nav_type == 2 ? 'nav-type2-item-active' : ''" @click="clickNavType(2)">我的推广</view>
		</view>
		<view class="nav-type2" v-if="tabIndex == 1 && nav_type == 2">
			<view class="nav-type2-item" :class="promote_type == 1 ? 'nav-type2-item-active' : ''" @click="clickPromoteType(1)">广告推送</view>
			<view class="nav-type2-item" :class="promote_type == 2 ? 'nav-type2-item-active' : ''" @click="clickPromoteType(2)">邀约推送</view>
		</view>
		<view class="list">
			<service v-if="tabIndex == 1 && nav_type == 1 && list.length > 0" :list="list" :type="2" :isMy="true" :isEdit="true" @editCommunity="editCommunity" @editCommunityShow="editCommunityShow"></service>
			<block v-else-if="tabIndex == 1 && nav_type == 2 && promote_type == 1 && list.length > 0"  v-for="(item,index) in list" :key="index">
				<view class='item acea-row row-between-wrapper'>
					<view class="picTxt acea-row row-between-wrapper">
						<view class='pictrue' @click="viewUser(item.uid)">
							<image :src='item.user.avatar ? item.user.avatar : "/static/images/f.png"'></image>
							<image class="svip" src="https://img.jukee.net/def/6c5a5202401291828344182.png" v-if="item.user.is_svip > 0" />
						</view>
						<view class='text' @click="viewUser(item.uid)">
							<view class='name line1'>{{item.user.nickname}}</view>
							<view class="label">{{item.user.label_name.label_name}}</view>
						</view>
						<view class="contact_btn" @click="couponTap2(item)">
							联系他
						</view>
					</view>
				</view>
			</block>
			<block v-else-if="tabIndex == 1 && nav_type == 2 && promote_type == 2 && inviteList.length > 0" v-for="(item,index) in inviteList" :key="index">
				<view class='item acea-row row-between-wrapper'>
					<view class="picTxt acea-row row-between-wrapper">
						<view class='pictrue' @click="viewUser(item.user.uid)">
							<image :src='item.user.avatar ? item.user.avatar : "/static/images/f.png"'></image>
							<!-- <image class="svip" src="https://img.jukee.net/def/6c5a5202401291828344182.png" v-if="item.user.is_svip > 0" /> -->
						</view>
						<view class='text' @click="viewUser(item.user.uid)">
							<view class='name line1'>{{item.user.nickname}}</view>
							<view class="label">{{item.user.label_name.label_name}}</view>
						</view>
						<view class="contact_btn" @click="couponTap2(item.user)">
							联系他
						</view>
					</view>
				</view>
			</block>
			<demand v-else-if="tabIndex == 3 && list.length > 0" :list="list" :type="2" :isMy="true" @delCommunity="delCommunity"></demand>
			<videoList v-else-if="tabIndex == 2 && list.length > 0" :list="list" :isMy="1" @delCommunity="delCommunity" @editCommunity="editCommunity"></videoList>
			<view v-else class="empty_back">
				<emptyPage title="正在加载中···"></emptyPage>
			</view>
		</view>
		<!-- 发布服务 -->
		<view class="create_community">
			<image src="http://ly.jukee.net/uploads/default/20230626/2d7b745cc731b85098c4adbdd64a459c.png" @click="openPublishPopup" />
		</view>
		<publishPopup :isPublishPopup="isPublishPopup" @closePublishPopup="closePublishPopup" :type="1"></publishPopup>
		<paymentData :payMode="payMode" :pay_close="pay_close" :is-call="true" @onChangeFun="onChangeFun" :payTitle="payTitle" :payGroupName="payGroupName" :userCount="userCount" :unit="unit" :rechargeType="rechargeType" :extends="payment_data_extends"></paymentData>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
		<!-- 升级VIP弹窗 -->
		<view class="user_vip_tips" v-if="user_vip_tips">
			<view class="user_vip_back"></view>
			<view class="user_vip_content">
				<view class="user_vip_close" @click="user_vip_tips = false">
					<image src="https://ly.jukee.net/uploads/default/20230803/8d5635ef7c1504bfadbd85f0a04270cc.png" />
				</view>
				<view class="user_vip_icon">
					<image src="https://img.jukee.net/def/3902e202311271626269626.png" />
				</view>
				<view class="user_vip_title font-size32-bold">成为VIP会员</view>
				<view class="user_vip_tit font-size36-bold" style="font-size: 46rpx;">无限添加客户微信<br/>查看所有客户联系方式</view>
				<view class="user_vip_messag">更多权益请在 "我的" 会员中心查看</view>
				<view class="user_vip_btn" @click="goUrl('/pages/annex/vip_paid/index')">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	 
	let app = getApp();
	import {
		getAttentionCircle
	} from '@/api/circle.js';
	import {
		getCommunityUser,
		serviceTopRefresh,
		editCommunityShow,
		getUserCommunityList,
    getUserInviteList
	} from '@/api/community.js';
	import {
		mapGetters
	} from "vuex";
	import authorize from '@/components/Authorize';
	import paymentData from '@/components/payDataList';
	import videoList from '@/components/videoList/index.vue';
	import service from '@/components/service/index.vue';
	import demand from '@/components/demand/index.vue';
	import emptyPage from '@/components/emptyPage.vue'
	import { configMap } from '@/utils';
	import { HTTP_REQUEST_URL } from '@/config/app';
	import { getUserInfo, userHasReward } from '@/api/user.js';
	import publishPopup from '@/components/publishPopup';
	export default {
		components: {
			authorize,
			paymentData,
			service,
			demand,
			videoList,
			emptyPage,
			publishPopup
		},
		data() {
			return {
				domain: HTTP_REQUEST_URL,
				loading: false,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false ,//是否隐藏授权
				tabIndex:1,
				limit:10,
				page:1,
				isScroll:true,
				moneyBg: '/static/images/couponBg',
				list: [],
				inviteList: [],
				pay_close: false,
				payment_data_extends: {},
				userCount: '',
				payTitle: '推广到期时间',
				payGroupName: 'community_promotion',
				unit: '天',
				rechargeType: 3,
				check_servive_circle_id: 0,
				service_circle_top_ids: [],
				community: {},
				payMode: [{
					name: '微信支付',
					icon: 'icon-weixinzhifu',
					value: 'wechat',
					title: '微信快捷支付',
					payStatus: true
					}
					// #ifdef H5 ||APP-PLUS
					,
					{
					name: '支付宝支付',
					icon: 'icon-zhifubao',
					value: 'alipay',
					title: '支付宝支付',
					payStatus: true
					}
					// #endif
					,
					{
						name: "余额支付",
						icon: "icon-yuezhifu",
						value: 'balance',
						title: '可用余额:',
						number: 0,
						payStatus: this.$store.getters.globalData.yue_pay_status
					}
				],
				isPublishPopup: false,
				nav_type: 1,
				promote_type: 1,
				user_vip_tips: false,
			};
		},
		computed: configMap(['hide_mer_status'], mapGetters(['isLogin','viewColor','keyColor'])),
		onLoad(options) {
			if (this.isLogin) {
				if(options.type) this.tabIndex = options.type
				if (options.type && options.type == 3) {
					uni.setNavigationBarTitle({
						title: '我的需求'
					})
				}
				this.getUserInfo();
				this.getList()
			} else {
                this.isAuto = true;
                this.isShowAuth = true
			}
		},
		mounted: function() {
		},
		methods: {
			// 服务人脉圈置顶
			serviceCircleTop(data) {
				if(this.check_servive_circle_id == data.community_id) {
					this.check_servive_circle_id = 0;
				} else {
					this.check_servive_circle_id = data.community_id
					this.community = data;
				}
				this.service_circle_top_ids = [];
			},
			changeServiceCircleTop(e) {
				this.service_circle_top_ids = e.detail.value || [];
			},
			payServiceCircleTop() {
				if(!this.service_circle_top_ids.length) return this.$util.Tips({title: '请至少选择一个人脉圈推广置顶服务'})
				this.payment_data_extends = {
					service_circle_top_ids: this.service_circle_top_ids,
					community_id: this.community.community_id
				}
				this.userCount = this.service_circle_top_ids.length
				this.payTitle = '推广服务人脉圈/个'
				this.payGroupName = 'service_circle_promotion'
				this.unit = '天1个人脉圈'
				this.rechargeType = 6
				this.pay_close = true;
			},
			// 服务刷新
			serviceRefresh(data) {
				let that = this;
				serviceTopRefresh(data.community_id).then(res=>{
					that.$util.Tips({title: res.message})
				}).catch(err=>{
					if(err == '服务置顶次数不足') {
						that.serviceTopCount(data);
					}
				})
			},
			// 服务刷新次数购买
			serviceTopCount(data) {
				this.payment_data_extends = {
					uid: this.userInfo.uid
				}
				this.userCount = this.userInfo.service_top_count
				this.payTitle = '服务刷新置顶'
				this.payGroupName = 'service_refresh'
				this.unit = '次'
				this.rechargeType = 5
				this.pay_close = true;
			},
			// 服务推广精准用户
			userPromotion(data) {
				this.payment_data_extends = {
					community_id: data.community_id
				}
				this.userCount = ''
				this.payTitle = '推广精准客户',
				this.payGroupName = 'service_promotion',
				this.unit = '位',
				this.rechargeType = 4,
				this.pay_close = true;
			},
			// 服务推广
			circlePromotion(data) {
				this.payment_data_extends = {
					community_id: data.community_id
				}
				this.userCount = data.promotion_time
				this.payTitle = '推广到期时间',
				this.payGroupName = 'community_promotion',
				this.unit = '天',
				this.rechargeType = 3,
				this.pay_close = true;
			},
			editCommunity(community_id) {
				let that = this;
				let url = '/pages/plantGrass/plant_release/index?type='+that.tabIndex+'&id='+community_id;
				console.log(666, url)
				that.$util.Tips(url);
			},
			editCommunityShow(index) {
				let that = this,
				list = that.list;
				editCommunityShow(list[index].community_id).then(res => {
					list[index].is_show = list[index].is_show == 1 ? 0 : 1;
					that.$set(that, 'list', list);
				}).catch(err=>{
					that.$util.Tips({title: err})
				})
			},
			openH5UrlHandler(e){
				const url = encodeURIComponent(e.currentTarget.dataset.url)
				wx.navigateTo({
					url: `/pages/extends/webTest/webTest?url=${url}`,
				})
			},
			/**
			 * 授权回调
			 */
			onLoadFun: function() {
				this.isShowAuth = false;
				return uni.switchTab({
					url: '/pages/user/index'
				});
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			/**
			 * 获取列表
			 */
			getList: function() {
				let that = this;
				if(!this.isScroll) return
				getCommunityUser({
					is_type: this.tabIndex,
					is_show_circle: this.tabIndex == 1 ? 1 : '',
					page:this.page,
					limit:this.limit,
					is_user_generalization: (this.tabIndex == 1 && this.nav_type == 2) ? 1 : 0,
				}).then(res => {
					that.list = that.list.concat(res.data.list)
					that.isScroll = that.list.length >= that.limit
					that.page++
				})
			},
			getUserCommunityList() {
				let that = this;
				if(!this.isScroll) return
				getUserCommunityList({
					type: 2,
					page:this.page,
					limit:this.limit
				}).then(res => {
					that.list = that.list.concat(res.data.list)
					that.isScroll = that.list.length >= that.limit
					that.page++
				})
			},
			// 获取邀约用户列表
			getInviteUserList() {
				let that = this;
				if(!this.isScroll) return
        getUserInviteList({
          page: this.page,
          limit: this.limit
        }).then(res => {
          that.inviteList = that.inviteList.concat(res.data.list)
          that.isScroll = that.inviteList.length >= that.limit
          that.page++
        })
				// uni.request({
				// 	url: this.domain + '/api/invite/get_user_invite_list',
				// 	method: 'GET',
				// 	header: {
				// 		'X-Token': uni.getStorageSync('token')
				// 	},
				// 	data: {
				// 		page: this.page,
				// 		limit: this.limit
				// 	},
				// 	success: function(res) {
				// 		if (res.data.status === 200) {
				// 			that.inviteList = that.inviteList.concat(res.data.data.list)
				// 			that.isScroll = that.inviteList.length >= that.limit
				// 			that.page++
				// 		}
				// 	}
				// })
			},
			couponTap2(data) {
				let that = this;
				if (this.isLogin === false) {
					return this.$util.Tips({title: '请先登录'}, {
						tab: 1,
						url: '/pages/user/index'
					})
				} else {
					// userHasReward({type: 'is_svip'}).then(res=>{
					// 	if(res.data.status == 1) {
					// 		that.$util.Tips('/pages/chat/customer_list/chat?userId='+data.uid)
					// 	} else {
					// 		that.user_vip_tips = true;
					// 	}
					// })
          uni.navigateTo({
						url: `/pages/chat/customer_list/chat?userId=${data.uid}`
					}); 
				}
			},
			viewUser(uid) {
				console.log(uid);
				let that = this;
				if (that.isLogin === false) {
					return that.$util.Tips({title: '请先登录'}, {
						tab: 1,
						url: '/pages/user/index'
					})
				} else {
					userHasReward({type: 'is_svip'}).then(res=>{
						if(res.data.status == 1) {
							that.$util.Tips('/pages/plantGrass/plant_user/index?id='+uid)
						} else {
							that.user_vip_tips = true;
						}
					})
				}
				
			},
			editCircle(id) {
				this.$util.Tips('/pages/extends/circle_create/index?id='+id);
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data;
					// #ifdef H5 ||APP-PLUS
					that.payMode[2].number = res.data.now_money;
					// #endif
					// #ifndef H5 ||APP-PLUS
					that.payMode[1].number = res.data.now_money;
					// #endif
				});
			},
			onChangeFun: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				action && this[action] && this[action](value);
			},
			payClose: function() {
				this.pay_close = false;
			},
			payOrderSuccess: function() {
				if(this.rechargeType == 6) {
					this.check_servive_circle_id = 0;
					this.service_circle_top_ids = [];
				}
			},
			goUrl(url) {
				if(!url) return false;
				this.$util.Tips(url);
			},
			getCircleInfo(circle_id) {
				let that = this;
				if(!that.isLogin) return that.$util.Tips({title:'请先登录'}, {tab: 1, url: '/pages/user/index'})
				getAttentionCircle(circle_id).then(res=>{
					if(res.status == 200 && res.data.pay_type){
						return that.$util.Tips('/pages/extends/circle_create/circle_info?id='+circle_id+'&check_nav=1')
					}
					return that.$util.Tips('/pages/extends/circle_create/circle_pay?id='+circle_id);
				}).catch(err=>{
					that.$util.Tips({title: err})
				})
			},
			openPublishPopup() {
				this.isPublishPopup = true;
			},
			closePublishPopup() {
				this.isPublishPopup = false;
			},
			delCommunity(index) {
				let that = this;
				that.list.splice(index, 1);
			},
			clickNavType(type) {
				let that = this;
				that.nav_type = type;
				that.page = 1;
				that.isScroll = true;
				that.list = [];
				that.promote_type = 1;
				that.inviteList = [];
				if (type == 2) {
					that.getUserCommunityList();
				} else {
					that.getList();
				}
			},
			clickPromoteType(type) {
				let that = this;
				that.promote_type = type;
				that.page = 1;
				that.isScroll = true;
				if (type == 1) {
					that.list = [];
					that.getUserCommunityList();
				} else {
					that.inviteList = [];
					that.getInviteUserList();
				}
			}
		},
		onReachBottom() {
			if (this.nav_type == 2) {
				if (this.promote_type == 1) {
					this.getUserCommunityList();
				} else {
					this.getInviteUserList();
				}
			} else {
				this.getList();
			}
		}
	}
</script>

<style scoped lang="scss">
	.nav-type {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #000;
		background-color: #fff;
		.nav-type-item {
			flex: 1;
			font-size: 36rpx;
			color: #ccc;
			text-align: center;
		}
		.nav-type-item:first-child {
			border-right: 1px solid #000;
		}
		.nav-type-item-active {
			font-weight: bold;
			color: #1C211D;
		}
	}
	.nav-type2 {
		display: flex;
		align-items: center;
		text-align: center;
		padding: 30rpx 0;
		background-color: #fff;
		.nav-type2-item {
			flex: 1;
			font-size: 38rpx;
			color: #323232;
			text-align: center;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.nav-type2-item-active::after {
			content: "";
			display: inline-block;
			width: 90%;
			height: 15rpx;
			background: url(https://ly.jukee.net/uploads/default/20230629/335f742a6bee3fdbc75d81c86c6ba350.png) center/contain no-repeat;
			margin-top: 10rpx;
			position: absolute;
			// left: 5%;
			bottom: -20rpx;
		}
	}
	.empty_back {
		background-color: #fff;
		/* position: fixed;
		top: 0;
		left: 0; */
		width: 100%;
		height: 100%;
	}
	::v-deepcheckbox .uni-checkbox-input.uni-checkbox-input-checked,
	::v-deepcheckbox .wx-checkbox-input.wx-checkbox-input-checked {
	  border: 1px solid var(--view-theme)!important;
	  background-color: var(--view-theme)!important;
	  color: #fff!important;
	}
	.list {
		padding: 30rpx;
		background-color: #fff;
	}
	.item {
		background-color: #fff;
		border-bottom: 1px solid #eee;
		height: 152rpx;
		padding: 0 30rpx 0 20rpx;
		font-size: 24rpx;
		color: #666;
		margin-bottom: 20rpx;
		.picTxt  {
			width: 100%;
			justify-content: unset;
			.pictrue {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				position: relative;
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
				.svip {
					width: 50rpx;
					height: 50rpx;
					position: absolute;
					right: -10rpx;
					bottom: -10rpx;
				}
			}
			.text {
				margin-left: 20rpx;
				padding-top: 8rpx;
				flex: 1;
				.name {
					font-size: 30rpx;
					font-weight: 500;
					color: #37393A;
					line-height: 42rpx;
					max-width: 300rpx;
				}
				.label {
					margin-top: 12rpx;
					font-size: 22rpx;
					font-weight: 400;
					color: #767676;
					line-height: 32rpx;
				}
			}
			.contact-button {
				width: 120rpx;
				justify-content: space-between;
				margin-left: auto;
				display: flex;
				align-items: center;
				.user_contact_wx image{
					width: 40rpx;
					height: 32rpx;
				}
				.user_contact_tel image{
					width: 40rpx;
					height: 40rpx;
				}
			}
			.contact_btn {
				font-size: 30rpx;
				font-weight: 500;
				color: #1C211D;
				line-height: 42rpx;
				padding: 12rpx 36rpx;
				background: #FFE103;
				border-radius: 37rpx;
				margin-left: auto;
			}
		}
	}
// 发布服务
.create_community {
	position: fixed;
	bottom: 0;
	left: 0;
	height: 190rpx;
	width: 100%;
	text-align: center;
	image {
		width: 120rpx;
		height: 120rpx;
	}
}
// 升级VIP弹窗
.user_vip_back {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 35;
}
.user_vip_content {
	background-color: #fff;
	position: fixed;
	top: 30%;
	left: 50rpx;
	right: 50rpx;
	// margin: 50% 50rpx 0;
	border-radius: 30rpx;
	padding: 30rpx;
	text-align: center;
	z-index: 35;
	.user_vip_close {
		position: absolute;
		right: 30rpx;
		top: 50rpx;
		image {
			width: 50rpx;
			height: 50rpx;
		}
	}
	.user_vip_icon {
		margin: 0 auto;
		image {
			width: 140rpx;
			height: 130rpx;
			margin: 0 auto;
			display: block;
		}
	}
	.user_vip_tit  {
		margin-top: 20rpx;
	}
	.user_vip_messag {
		font-size: 32rpx;
		margin-top: 30rpx;
	}
	.user_vip_btn {
		font-weight: bold;
		background-color: #FDE515;
		display: inline-block;
		padding: 10rpx 50rpx;
		border-radius: 10rpx;
		margin-top: 30rpx;
		font-size: 42rpx;
	}
}
</style>
